<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html" charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/css/chatroom.css}">
</head>
<body>
<script type="text/javascript" th:src="@{/js/jquery.min.js}" charset="utf-8"></script>
<script th:inline="javascript" th:src="@{/js/server.js}" charset="utf-8"></script>

<input id="uname" type="hidden" th:value="${uname}" />

    用户: <span th:text="${uname}"></span>

    <br>
    <div class="chat-window">
        <input type="button" value="连接websocket" onclick="connect()"/>
    </div>

    <br>
    <div class="chat-window">
        <input type="button" value="断开websocket" onclick="disConnect()"/>
    </div>

    <br>
    <div class="chat-window">
        <input type="button" value="用户加入大厅" onclick="addUser()"/>
    </div>

    <br>
    <div class="chat-window">
        <input type="button"  value="随机匹配" onclick="matchUser()"/>
    </div>

    <br>
    <div class="chat-window">
        <input type="button"  value="取消匹配" onclick="cancelMatch()"/>
    </div>

    <br>
    <div class="chat-window">
        <span>匹配对局</span>
        <div>
            本方：<span name="player1" id="player1"></span><br>
            牌数：<input type="text" name="text1" id="text1" placeholder="本方牌数"/><br>
            步骤：<span name="player1Steps" id="player1Steps"></span>
            <br>
            <button onclick="playMySelf()">确定</button>
        </div>
        <br>
        <div>
            对手：<span name="player2" id="player2"></span><br>
            牌数：<input type="text" name="text2" id="text2" placeholder="对手牌数"/><br>
            步骤：<span name="player2Steps" id="player2Steps"></span>
            <br>
            <button onclick="playOpponent()">确定</button>
        </div>
        <br>

    </div>

    <br>
    <div class="chat-window">
        <input type="button"  value="游戏结束" onclick="gameOver()"/>
    </div>

    <br>
    收到消息：<textarea name="textArea" id="textArea" style="width: 1000px;height: 300px;"></textarea>
</body>
</html>